<template>
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column fixed prop="title" label="标题" width="80" />
        <el-table-column prop="author" label="作者" width="88" />
        <el-table-column prop="category" label="分类" width="100" />
        <el-table-column prop="tags" label="标签" width="88" />
        <el-table-column prop="updatedAt" label="更新时间" width="200" />
        <el-table-column prop="createdAt" label="创建时间" width="200" />
        <el-table-column prop="description" label="文章描述" width="200" />
        <el-table-column prop="imagePath" label="展示图片地址" width="120" />


        <el-table-column fixed="right" label="操作" min-width="210">
            <template v-slot="scope"><!-- scoe拿到当前行的数据 并传输给按钮的点击事件-->
                <el-button category="primary" size="small" @click="handleClick(scope.row)">
                    详情
                </el-button>
                <!-- <RouterLink @click="toEdit(scope.row)" :to="{ path: '/edit', query: { id: formLabelAlign.articleId } }"> -->
                <el-button @click="toEdit(scope.row)" category="primary" size="small">编辑</el-button>
                <!-- </RouterLink> -->
            </template>
        </el-table-column>

    </el-table>

    <div class="center-all">
        <span style="padding-bottom: 4rem; padding-top: 1rem" @click="deleteById()">
            <el-button type="danger" icon="Delete" circle />
        </span>

        <span style="padding-bottom: 4rem; padding-top: 1rem;margin-left: 2rem;" @click="addArticle()">
            <el-button type="primary" icon="Edit" circle />
        </span>

    </div>





    <el-dialog v-model="centerDialogVisible" title="文章相关信息编辑" width="500" align-center>
        <el-form tags-width="auto" :model="formLabelAlign" style="max-width: 600px">

            <el-form-item tags="标题" label="标题">
                <el-tooltip content="文章首页展示标题">
                    <el-input placeholder="" v-model="formLabelAlign.title" />
                </el-tooltip>
            </el-form-item>

            <el-form-item tags="作者" label="作者">
                <el-tooltip content="多个作者用空格隔开">
                    <el-input v-model="formLabelAlign.author" />
                </el-tooltip>
            </el-form-item>
            <el-form-item tags="分类" label="分类">
                <el-tooltip content="多个分类之间空格隔开">
                    <el-input v-model="formLabelAlign.category" />
                </el-tooltip>
            </el-form-item>
            <!-- --------- -->

            <el-form-item tags="标签" label="标签">
                <el-tooltip content="多个标签之间空格隔开">
                    <el-input placeholder="" v-model="formLabelAlign.tags" />
                </el-tooltip>
            </el-form-item>

            <el-form-item tags="文章描述" label="描述">
                <el-tooltip content="主页下方的文章描述">
                    <el-input placeholder="" type="textarea" v-model="formLabelAlign.description" />
                </el-tooltip>
            </el-form-item>

            <el-form-item tags="图片地址" label="图片">
                <el-tooltip content="请输入完整在线图片地址">
                    <el-input placeholder="" v-model="formLabelAlign.imagePath" />
                </el-tooltip>
            </el-form-item>


        </el-form>


        <template #footer>
            <div class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取消</el-button>
                <el-button category="primary" @click="save()">
                    保存
                </el-button>
            </div>
        </template>

    </el-dialog>
</template>

<script lang="ts" setup>
import { oneArticle } from '../../utils/instances';
import { ref, onMounted, reactive, toRaw } from 'vue'
import { getArticleList, deleteByIds,createArticle } from '../../utils/axios';
import { editArticle } from '../../utils/axios';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
import Cookies from 'js-cookie';


let router = useRouter()
let deleteId: any[] = []

function handleSelectionChange(selection: any) {
    deleteId = []
    selection.forEach((element: { articleId: any; }) => {
        deleteId.push(element.articleId)
    });
    // console.log(deleteId);
}
//创建文章
function addArticle() {
    formLabelAlign.articleId = 0
    formLabelAlign.title = ""
    formLabelAlign.author = ""
    formLabelAlign.category = ""
    formLabelAlign.tags = ""
    formLabelAlign.description = ""
    formLabelAlign.imagePath = ""
    centerDialogVisible.value = true
}

//删除文章
function deleteById() {
    if (deleteId.length == 0) {
        console.log("选中为空未删除");
    } else {
        let strPath = ''
        deleteId.forEach(item => {
            strPath = strPath + "ids=" + item + "&"
        })
        strPath = strPath.substring(0, strPath.length - 1)
        //发送请求字符串拼接
        deleteByIds(strPath).then(s => {
            if(s.data.code == 200){
                 ElMessage.success('删除成功')
            }
            if(s.data.code == 300){
                // ElMessage.success('重定向')
                router.push('/login')
            }
          
        }).catch(e => {
            ElMessage.error('删除失败')
        })
    }
}


const formLabelAlign = reactive({
    articleId: 1,
    title: '',
    author: '',
    category: '',
    tags: '',
    description: '',
    imagePath: ''
})

//对话框的开启与关闭 保存按钮
const centerDialogVisible = ref(false)
function save() {
    centerDialogVisible.value = false

    let json1 
    if (formLabelAlign.articleId == 0) {
        json1 = toRaw(formLabelAlign);
        createArticle(json1).then(
           s=>{
            if(s.data.code == 200){
                
            ElMessage.success("新建文章成功")
            }
            if(s.data.code == 300){
                // ElMessage.success('重定向')
                router.push('/login')
            }
            

           } 
        ).catch(
            e=>{
                   ElMessage.error("网络错误,修改失败")
            }
         
        )
        
        
    } else {
        json1 = toRaw(formLabelAlign);
        editArticle(json1).then(success => {
            if(success.data.code == 200){
                
                ElMessage.success("修改成功")
                }
                if(success.data.code == 300){
                    // ElMessage.success('重定向')
                    router.push('/login')
                }
            
          
            // console.log(success);
        }).catch(error => {
            ElMessage.error("网络错误,修改失败")
            // console.log(error);
        })
    }

}

//文章详情的点击事件
const handleClick = (row: any) => {
    formLabelAlign.articleId = row.articleId
    formLabelAlign.title = row.title
    formLabelAlign.author = row.author
    formLabelAlign.category = row.category
    formLabelAlign.tags = row.tags
    formLabelAlign.description = row.description
    formLabelAlign.imagePath = row.imagePath
    // console.log(row);
    centerDialogVisible.value = true
}

let tableData = ref<oneArticle[]>([])

onMounted(() => {
   if(Cookies.get('cookie-jwt') == null){
        router.push('/login')
    }else{
        getArticleList(1).then(success => {
        tableData.value = success.data.data.data
        // console.log(tableData.value);
    }).catch(() => {

    })
    }



})

//跳转到文章编辑页面
function toEdit(row: any) {
    // formLabelAlign.articleId = row.articleId
    router.push(`/edit?id=${row.articleId}`)
}
</script>